import { defineComponent, watch, ref, onMounted, toRefs } from 'vue'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    const { xdata, data1, data2 } = toRefs(props.cdata.value)
    // 配置项
    let options = {
      title: {
        text: '各行业用煤占比', // 主标题文本
        // subtext: '副标题', // 副标题文本
        left: 'center', // 标题水平位置：'left'/'center'/'right'
        top: '40', // 标题垂直位置
        textStyle: {
          color: '#fff', // 主标题文字颜色
          fontSize: 40 // 主标题文字大小
          // fontWeight: 'bold' // 主标题文字粗细
        }
        // subtextStyle: {
        //   color: '#ccc', // 副标题文字颜色
        //   fontSize: 30 // 副标题文字大小
        // },
        // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
      },
      grid: {
        top: '10%', // 上边距，可用具体像素值 '100px' 或百分比 '10%'
        bottom: '20%' // 下边距
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          center: ['50%', '60%'],
          name: '访问来源',
          type: 'pie',
          radius: '60%',
          label: {
            show: true,
            // fontSize: 32, // 设置文字大小
            // color: '#fff', // 文字颜色
            // fontWeight: 'bold', // 文字粗细
            // formatter: '{b}\n{d}亿吨'
            // formatter: '{a|{b}}\n{b|{d}亿吨}',
            // formatter: '{b}: {c}',
            formatter: '{a|{b}}\n{b|{c}%}',
            rich: {
              a: {
                // lineHeight: 40, // 设置第一行文字的行高
                fontSize: 26,
                color: '#fff'
              },
              b: {
                lineHeight: 40, // 设置第二行文字的行高
                fontSize: 26,
                color: 'rgba(255, 195, 0, 1)'
              }
            }
          },
          labelLine: {
            show: true,
            length: 20, // 第一段线长度
            length2: 50, // 第二段线长度
            lineStyle: {
              width: 4, // 设置引导线粗细
              type: 'solid', // 线的类型：'solid'实线 | 'dashed'虚线 | 'dotted'点线
              color: '#fff' // 引导线颜色
            }
          },
          // 添加3D效果
          itemStyle: {
            shadowBlur: 30,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 40,
              shadowOffsetX: 10,
              shadowOffsetY: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: [
            { value: 25.7, name: '发电行业' },
            { value: 5.9, name: '炼焦行业' },
            { value: 4.7, name: '其他行业' },
            { value: 3.4, name: '供热行业' },
            { value: 2.9, name: '建材行业' },
            { value: 2.9, name: '煤化工行业' },
            { value: 1.8, name: '冶金行业' }
          ],
          // 设置3D效果的配置
          roseType: 'angle', // 设定为饼图
          animationType: 'scale', // 使用缩放动画
          animationEasing: 'elastic' // 采用弹性动画
        }
      ]
    }

    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
